<template>
  <div class="login">
    <br>
    <NavBar style="margin-top: 1rem;width: 98%;margin-left: 1%">
      <span slot="search">用户登录</span>
    </NavBar>
    <div class="head">
      <div class="img">
        <img src="/img/head.png">
      </div>
    </div>
    <!--登陆-->
    <form>
      <div class="item">
<!--        <img src="/img/icon-phone.png" alt="">-->
        <i class="fa fa-user-circle"></i>
        <input id="username" type="text" name="username" placeholder="请输入帐号" autocomplete="off" >
      </div>
      <div class="item">
        <img src="/img/icon-lock.png" alt="">
        <input id="password" type="password" name="password" placeholder="请输入密码" autocomplete="off" >
      </div>
      <div class="submit">
        <input @click.prevent="login" type="button" value="登录">
      </div>
      <div class="reg">
        <a href="#" @click.prevent="toRegister">没有账号？去注册</a>
      </div>
    </form>
    <!--第三方登陆-->
    <div class="other-login">
      <p>
        <span>使用第三方帐号登录</span>
      </p>
      <div class="third">
        <ul>
          <li>
            <i class="fa fa-qq"></i>
          </li>
          <li>
            <i class="fa fa-wechat"></i>
          </li>
          <li>
            <i class="fa fa-weibo"></i>
          </li>
        </ul>
      </div>
    </div>
    <!--尾部-->
    <br>
    <div class="footer">
      <p>登录使用就表示同意<a href="javascript:;">用户协议条款</a>和<a href="javascript:;">隐私政策</a></p>
    </div>
  </div>
</template>

<script>
import NavBar from "../navbar/NavBar";
import qs from "qs";
export default {
  name: "Login",
  methods: {
    //去注册页面方法
    toRegister(){
      this.$router.replace('/register')
    },
  //  处理登录功能
    login(){
      let username = document.querySelector('#username').value;
      let password = document.querySelector('#password').value;
      let data = qs.stringify({
        username,
        password
      })
      if (username && password){
        this.axios({
          url: 'http://192.168.3.4:3001/login',
          method: 'post',
          data: data
        }).then((res)=>{
          //找到此人
          if (res.data.flag === true){
            sessionStorage.setItem('username',res.data.data[0].username);
            this.$router.replace('/profile');
          }else{
            alert('用户名或密码错误！！！');
          }
        }).catch((err)=>{
          console.log(err);
        })
      }else{
        alert('用户名或密码不能为空！！！');
      }

    },
  },
  components: {
    NavBar
  }
}
</script>

<style scoped>
  .login{
    width: 98%;
    height: 19rem;
    margin-left: 1%;
    background-color: white;
  }
  .head{
    height: 5rem;
  }
  .head .img{
    text-align: center;
    width: 60%;
    height: 5rem;
    line-height: 4rem;
    margin: 0 auto;
  }
  .head .img img{
    display: inline-block;
    width: 70%;
    height: 3.5rem;
    line-height: 3.5rem;
    margin-top: 1.25rem;
  }
  .item{
    width: 85%;
    height: 2rem;
    margin: 0.4rem auto 0;
    position: relative;
  }
  .item input{
    display: inline-block;
    width: 100%;
    height: 1.5rem;
    margin-top: 0.25rem;
    border: none;
    outline: none;
    border-radius: 30px;
    text-align: center;
    font-size: 0.6rem;
    background-color: #DDDDDD;
  }
  .item img{
    position: absolute;
    width: 0.6rem;
    height: 0.75rem;
    top: 0.625rem;
    left: 0.6rem;
  }
  .item i{
    position: absolute;
    width: 0.6rem;
    font-size: 0.7rem;
    height: 0.75rem;
    top: 0.64rem;
    left: 0.6rem;
  }
  .submit{
    width: 40%;
    height: 1.2rem;
    margin: 0.6rem auto 0;
  }
  .submit input{
    display: block;
    width: 90%;
    height: 1.2rem;
    font-size: 0.8rem;
    border: none;
    outline: none;
    border-radius: 30px;
    margin-left: 5%;
    background-color: #00CCFF;
  }

  .reg{
    width: 100%;
    height: 1rem;
    margin-top: 10px;
  }
  .reg a{
    display: block;
    width: 50%;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    text-decoration: none;
    font-size: 0.4rem;
    margin: -0.3rem auto 0;
  }
  .other-login{
    width: 100%;
    height: 1rem;
    line-height: 1rem;
  }
  .other-login p{
    height: 1rem;
    line-height: 1rem;
  }
  .other-login p span{
    text-align: center;
    display: block;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.5rem;
  }
  .third{
    width: 100%;
    height: 1rem;
  }
  .third ul{
    width: 40%;
    height: 1rem;
    margin: 0 auto;
  }
  .third ul li{
    text-align: center;
    list-style: none;
    display: inline-block;
    float: left;
    font-size: 0.6rem;
    width: 33.333%;
  }
  .footer{
    width: 100%;
    height: 1rem;
    font-size: 0.4rem;
    background-color: skyblue;
  }
  .footer p{
    text-align: center;
    height: 1rem;
    line-height: 1rem;
  }
</style>